<template>
  <view class="container">
    <!-- 反馈类型选择 -->
    <view class="form-section">
      <view class="section-title">反馈类型</view>
      <view class="feedback-types">
        <view 
          v-for="(type, index) in feedbackTypes" 
          :key="index"
          class="type-item"
          :class="{ active: selectedType === type.value }"
          @click="selectedType = type.value"
        >
          {{ type.label }}
        </view>
      </view>
    </view>

    <!-- 问题描述 -->
    <view class="form-section">
      <view class="section-title">问题描述</view>
      <textarea
        class="feedback-content"
        v-model="content"
        placeholder="请详细描述您遇到的问题，以便我们更好地为您解决"
        maxlength="500"
      />
      <view class="word-count">{{ content.length }}/500</view>
    </view>

    <!-- 图片上传 -->
    <view class="form-section">
      <view class="section-title">图片上传</view>
      <view class="upload-section">
        <view class="image-list">
          <view 
            v-for="(image, index) in images" 
            :key="index" 
            class="image-item"
          >
            <image :src="image" mode="aspectFill" />
            <text class="delete-btn" @click="deleteImage(index)">×</text>
          </view>
          <view 
            class="upload-btn" 
            v-if="images.length < 3"
            @click="chooseImage"
          >
            <text class="plus">+</text>
            <text class="tip">上传图片</text>
          </view>
        </view>
        <text class="upload-tip">最多上传3张图片</text>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitFeedback">提交反馈</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 反馈类型列表
const feedbackTypes = [
  { label: '功能异常', value: 'bug' },
  { label: '体验问题', value: 'experience' },
  { label: '功能建议', value: 'suggestion' },
  { label: '其他', value: 'other' }
]

// 表单数据
const selectedType = ref('')
const content = ref('')
const images = ref([])

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - images.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths]
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  images.value.splice(index, 1)
}

// 提交反馈
const submitFeedback = () => {
  if (!selectedType.value) {
    uni.showToast({
      title: '请选择反馈类型',
      icon: 'none'
    })
    return
  }

  if (!content.value.trim()) {
    uni.showToast({
      title: '请输入问题描述',
      icon: 'none'
    })
    return
  }

  // TODO: 调用接口提交反馈
  console.log('提交反馈：', {
    type: selectedType.value,
    content: content.value,
    images: images.value
  })

  uni.showToast({
    title: '提交成功',
    icon: 'success'
  })

  // 延迟返回上一页
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.feedback-types {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;

  .type-item {
    padding: 16rpx 30rpx;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #666;
    transition: all 0.3s;

    &.active {
      background-color: #FF5733;
      color: #fff;
    }
  }
}

.feedback-content {
  width: 100%;
  height: 300rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.word-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.upload-section {
  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }

  .image-item {
    position: relative;
    width: 180rpx;
    height: 180rpx;
    border-radius: 12rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }

    .delete-btn {
      position: absolute;
      top: 6rpx;
      right: 6rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
    }
  }

  .upload-btn {
    width: 180rpx;
    height: 180rpx;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .plus {
      font-size: 48rpx;
      color: #999;
      margin-bottom: 10rpx;
    }

    .tip {
      font-size: 24rpx;
      color: #999;
    }
  }

  .upload-tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 20rpx;
    display: block;
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background-color: #FF5733;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    opacity: 0.9;
  }
}
</style>